<template>
	<el-main class="nopadding u-m-b-20 jxx-info-box">
		<div class="u-p-20 u-border-r-5">
			<el-row :gutter="20" style="margin:0;">
				<el-col :span="6" class="u-flex">
					<el-form-item label="故障类型" prop="account">
						{{info.hitchType}}
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="申告人" prop="account">
						{{info.userName}}
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="联系电话" prop="account">
						{{info.linkTel}}
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<div class="u-flex u-col-top">
						<el-form-item label="故障描述" prop="account">
							{{info.describeText}}
						</el-form-item>
					</div>

				</el-col>
				<el-col :span="24" class="">
					<el-form-item label="附件" prop="account">
						<span v-for="(item,index) in info.files" :key="index">
							{{item.name}}
						</span>
					</el-form-item>
				</el-col>


			</el-row>
		</div>
	</el-main>
	<div v-if="info.records && info.records.length" class="nopadding u-m-b-20 jxx-info-box">
		<el-table :data="info.records" style="width: 100%" border>
			<el-table-column prop="userName" label="处理人" width="180" />
			<el-table-column prop="createTime" label="处理时间" width="180" />
			<el-table-column prop="describeText" label="处理记录" />
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					id: ""
				}
			}
		},
		mounted() {

		},
		methods: {
			//注入数据
			setData(data) {
				this.info = data
				if(this.info.files){
					let files = this.info.files.split(",")
					const newArray = files.map(item => {
						return {
							name: item,
							url: item
						}
					})
					this.info.files = newArray
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	.jxx-info-box {
		border: 1px solid #ddd;
		background-color: #f9f9f9;

		label {
			width: 80px;
			text-align: right;
			display: block;
		}

		.jxx-item-info {
			margin-left: 100px;
		}
	}
</style>
